<template>
  <n-card class="cardbg">
    <n-space align="center">
      <n-button
        style="height: 35px"
        size="small"
        quaternary
        type="warning"
        @click="val.ssset = item"
        v-for="item in val.ss"
      >
        <img width="13" :src="`https://t2.ww2.ren/img/${item}属性.png`" /><span
          style="padding-left: 5px"
          >{{ item }}属性</span
        >
      </n-button>
    </n-space>

    <n-hr />
    <div style="display: flex; gap: 2px 3px; flex-wrap: wrap; flex-direction: row">
      <template v-for="item in cfg.role">
        <template v-if="item.star > 2">
          <div v-if="val.ssset == null || val.ssset == item?.shu">
            <img
              @click="ct.sub(item)"
              style="width: 45px"
              :src="cfg.function.ava(item.icon)"
            />
          </div>
        </template>
      </template>
    </div>
  </n-card>

  <div style="min-height: 700px; position: relative; overflow: hidden">
    <div
      class="left"
      style="width:300px; margin-left: 35px; margin-top: 25px"
    >
      <div
        style="
          text-align: center;
          min-width: 300px;
          font-size: 3rem;
          text-shadow: 0 0 12px #000;
        "
      >
        {{ val.ckname?.name }}
      </div>
      <div
        class="left_main"
        style="background-color: rgb(24 32 43 / 85%); border-radius: 5px; width: 300px"
      >
        <div style="background-color: rgb(22 28 37 / 50%)">
          <div
            style="
              background-color: #337d9c;
              text-align: center;
              font-size: 16px;
              line-height: 30px;
              border-radius: 5px 5px 0px 0px;
            "
          >
            英雄
          </div>
        </div>
        <div class="hero_main_div">
          <div @click="val.tymode = true">
            <div class="hero_list_div">
              <span>◆ 通用效果：</span>
            </div>
            
            <div >
              <pre style="margin: 0;padding-left:15px;">{{ val.ckname?.text?.tytext }}</pre>
            </div>

          </div>
          <n-hr/>
          <div @click="val.basicmode = true">
            <div class="hero_list_div">
              <span>◆ 普通模式：</span>
            </div>

            <div >
              <pre style="margin: 0;padding-left:15px;">{{ val.ckname?.text?.basictext }}</pre>
            </div>

          </div>
          <n-hr/>
          <div @click="val.yzbeta = true">
            <div class="hero_list_div">
              <span>◆ 团队远征队模式正式版：</span>
            </div>

            <div >
              <pre style="margin: 0;padding-left:15px;">{{ val.ckname?.text?.yzbeta }}</pre>
            </div>

          </div>
        </div>
        <div class="hero_main_div">
        
          <n-modal
            v-model:show="val.yzbeta"
            class="custom-card"
            style="width: 50%"
            preset="card"
            title="编辑合作远征Beta文本"
          >
            <n-form-item label="合作远征Beta文本">
              <n-input
                type="textarea"
                v-model:value="val.ckname.text.yzbeta"
                placeholder="自动调整尺寸"
                :autosize="{
                  minRows: 3,
                }"
              />
            </n-form-item>
            <n-form-item label="调用模板">
            <n-space>
            <n-button @click="val.ckname.text.yzbeta = `攻击 + 50.0%\n暴击率 + 40.0%\n防御 + 5.0%`">50攻40暴5防</n-button>
            <n-button @click="val.ckname.text.yzbeta = `攻击 + 50.0%\n暴击率 + 40.0%\n伤害值 + 30.0%`">50攻40暴30伤</n-button>
            <n-button @click="val.ckname.text.yzbeta = `生命 + 40.0%\n攻击 + 32.0%`">40生命32攻</n-button>
            <n-button @click="val.ckname.text.yzbeta = `生命 + 30.0%\n伤害值 + 26.0%\n敌方恶化等级 + 4`">生命30伤26恶化4</n-button>

            <n-button @click="val.ckname.text.yzbeta = `攻击 + 50.0%\n暴击率 + 40.0%\n伤害值 + 50.0%\n承受伤害 - 15.0%`">50攻40暴50伤减免15</n-button>
            <n-button @click="val.ckname.text.yzbeta = `攻击 + 50.0%\n暴击率 + 40.0%\n防御 + 10.0%\n伤害值 + 20.0%\n承受伤害 - 10.0%`">50攻40暴10防20伤10减免</n-button>
          </n-space>
          </n-form-item>
            <template #footer>
              <n-button type="warning" @click="ct.axiosupd('text')">确认</n-button>
            </template>
          </n-modal>

          <n-modal
            v-model:show="val.tymode"
            class="custom-card"
            style="width: 50%"
            preset="card"
            title="编辑通用效果文本"
          >
            <n-form-item label="通用效果文本">
              <n-input
                type="textarea"
                v-model:value="val.ckname.text.tytext"
                placeholder="自动调整尺寸"
                :autosize="{
                  minRows: 3,
                }"
              />
            </n-form-item>
            <template #footer>
              <n-button type="warning" @click="ct.axiosupd('text')">确认</n-button>
            </template>
          </n-modal>

          <n-modal
            v-model:show="val.basicmode"
            class="custom-card"
            style="width: 50%"
            preset="card"
            title="编辑普通模式文本"
          >
            <n-form-item label="普通模式文本">
              <n-input
                type="textarea"
                v-model:value="val.ckname.text.basictext"
                placeholder="自动调整尺寸"
                :autosize="{
                  minRows: 3,
                }"
              />
            </n-form-item>
            <template #footer>
              <n-button type="warning" @click="ct.axiosupd('text')">确认</n-button>
            </template>
          </n-modal>

          <n-modal
            v-model:show="val.zw_1"
            class="custom-card"
            style="width: 50%"
            preset="card"
            title="编辑专武一"
          >
            {{ val.ckname }}
            <n-form-item label="专武名称：（WIKI名称）">
              <n-input v-model:value="val.ckname.zw_1.name"></n-input>
            </n-form-item>
            <n-form-item label="专武异常类型">
              <n-select
                v-model:value="val.ckname.zw_1.ycl"
                placeholder="Select"
                :options="val.zw_type"
              />
            </n-form-item>
            <n-form-item label="专武异常值">
              <n-input v-model:value="val.ckname.zw_1.yc"></n-input>
            </n-form-item>
            <n-form-item label="专武刻印类型">
              <n-select
                v-model:value="val.ckname.zw_1.ky"
                placeholder="Select"
                :options="val.ky_type"
              />
            </n-form-item>
            <template #footer>
              <n-button type="warning" @click="ct.axiosupd('zw_1')">确认</n-button>
            </template>
          </n-modal>
          <n-modal
            v-model:show="val.zw_2"
            class="custom-card"
            style="width: 50%"
            preset="card"
            title="编辑专武二"
          >
            {{ val.ckname }}
            <n-form-item label="专武名称：（WIKI名称）">
              <n-input v-model:value="val.ckname.zw_2.name"></n-input>
            </n-form-item>
            <n-form-item label="专武异常类型">
              <n-select
                v-model:value="val.ckname.zw_2.ycl"
                placeholder="Select"
                :options="val.zw_type"
              />
            </n-form-item>
            <n-form-item label="专武异常值">
              <n-input v-model:value="val.ckname.zw_2.yc"></n-input>
            </n-form-item>
            <n-form-item label="专武刻印类型">
              <n-select
                v-model:value="val.ckname.zw_2.ky"
                placeholder="Select"
                :options="val.ky_type"
              />
            </n-form-item>
            <template #footer>
              <n-button type="warning" @click="ct.axiosupd('zw_2')">确认</n-button>
            </template>
          </n-modal>
          <div class="hero_list_div">
            <div @click="val.zw_1 = true">
              <span
                ><template v-if="val?.ckname?.zw_1?.name == null">未设置 (编辑)</template
                ><template v-else
                  >{{ val?.ckname?.zw_1.name }}({{ val?.ckname?.zw_1.ycl }})
                  <div class="hero_wp">
                    <img
                      class="hero_eqst"
                      src="https://xxapi.ww2.ren/gt/Special:Redirect/file/Rank3 5.png?imageView2/0/format/webp/interlace/1/q/50|imageslim"
                    />
                    <img
                      style="max-width: 100%"
                      :src="`https://xxapi.ww2.ren/gt/Special:Redirect/file/${val?.ckname?.zw_1.name}.png?imageView2/0/format/webp/interlace/1/q/50|imageslim`"
                    />
                  </div> </template
              ></span>
              <div
                v-if="val?.ckname?.zw_1 != null"
                style="margin-top: 10px; font-size: 13px"
              >
                <div>[刻印固定]</div>
                <div>- 攻击 15%</div>
                <div>- 生命 15%</div>
                <div>[刻印随机]</div>
                <div v-if="val?.ckname?.zw_1?.ky == 'heal'">- 恢复能力 3% - 15%</div>
                <div v-if="val?.ckname?.zw_1?.ky == 'atk'">- 攻击 3% - 15%</div>
                <div v-if="val?.ckname?.zw_1?.ky == 'hp'">- 生命 3% - 15%</div>
                <div v-if="val?.ckname?.zw_1?.ky == 'chr'">- 暴击抗性 2% - 10%</div>
                <div v-if="val?.ckname?.zw_1?.ky == 'chc'">- 暴击率 2% - 10%</div>
                <div v-if="val?.ckname?.zw_1?.ky == 'skill'">- 技能伤害 9% - 45%</div>
              </div>
            </div>
            <n-hr />
            <div
              @click="val.zw_2 = true"
              style="display: flex; flex-direction: column; align-items: flex-end"
            >
              <span
                ><template v-if="val?.ckname?.zw_2?.name == null">二专未设置</template
                ><template v-else
                  >{{ val?.ckname?.zw_2.name }}({{ val?.ckname?.zw_2.ycl }})
                  <div class="hero_wp">
                    <img
                      class="hero_eqst"
                      src="https://xxapi.ww2.ren/gt/Special:Redirect/file/Rank3_5.png?imageView2/0/format/webp/interlace/1/q/50|imageslim"
                    />

                    <img
                      style="max-width: 100%"
                      :src="`https://xxapi.ww2.ren/gt/Special:Redirect/file/${val?.ckname?.zw_2.name}.png?imageView2/0/format/webp/interlace/1/q/50|imageslim`"
                    />
                  </div> </template
              ></span>
              <div
                v-if="val?.ckname?.zw_2.ky != null"
                style="margin-top: 10px; font-size: 13px"
              >
                <div>[刻印固定]</div>
                <div>- 攻击 15%</div>
                <div>- 生命 15%</div>
                <div>[刻印随机]</div>
                <div v-if="val?.ckname?.zw_2?.ky == 'heal'">- 恢复能力 3% - 15%</div>
                <div v-if="val?.ckname?.zw_2?.ky == 'atk'">- 攻击 3% - 15%</div>
                <div v-if="val?.ckname?.zw_2?.ky == 'hp'">- 生命 3% - 15%</div>
                <div v-if="val?.ckname?.zw_2?.ky == 'chr'">- 暴击抗性 2% - 10%</div>
                <div v-if="val?.ckname?.zw_2?.ky == 'chc'">- 暴击率 2% - 10%</div>
                <div v-if="val?.ckname?.zw_2?.ky == 'skill'">- 技能伤害 9% - 45%</div>
              </div>
            </div>
          </div>
        </div>

        <br />
      </div>
    </div>
    <div style="display: flex; justify-content: center">
      <img
        style="
        top:0;
          margin-top: -2%;
          height: 110%;
          position: absolute;
          z-index: -1;
          object-fit: cover;
          filter: opacity(0.9);
        "
        :src="`https://xxapi.ww2.ren/gt/Special:Redirect/file/${val.ckname?.name}立绘.png?imageView2/0/w/800/format/webp/interlace/1/q/80|imageslim`"
      />

      <img
        style="
        top:0;
          min-width: 250%;
          height: 100%;
          filter: blur(6px);
          position: absolute;
          z-index: -2;
          object-fit: cover;
        "
        :src="`https://wiki.biligame.com/gt/Special:Redirect/file/柯妮特立绘背景.png`"
      />
    </div>
  </div>
</template>

<script>
import { getrole, strtorole } from "@/cfg/function.js";
import { useRoute, useRouter } from "vue-router";
import { cfg } from "@/cfg/cfg.js";

export default defineComponent({
  setup() {
    const comp = {};

    let val = reactive({
      ss: ["火", "水", "土", "光", "暗", "虚"],
      ky_type: [
        {
          label: "攻击力",
          value: "atk",
        },
        {
          label: "生命值",
          value: "hp",
        },
        {
          label: "暴击抗性",
          value: "chr",
        },
        {
          label: "暴击率",
          value: "chc",
        },
        {
          label: "恢复能力",
          value: "heal",
        },
        {
          label: "技能伤害",
          value: "skill",
        },
      ],
      zw_type: [
        {
          label: "击倒",
          value: "击倒",
        },
        {
          label: "击飞",
          value: "击飞",
        },
        {
          label: "重伤",
          value: "重伤",
        },
      ],
      ckname: null,
    });

    let ct = reactive({
      sub: (data) => {
        if (data.zw_1 == null) {
          data.zw_1 = {};
        }
        if (data.zw_2 == null) {
          data.zw_2 = {};
        }
        if (data.text == null) {
          data.text = {};
        }

        val.ckname = data;
      },
      axiosupd: async (uptype) => {
        const res = await cfg.axios.get(`${cfg.url}`, {
          params: {
            t: "get/work/up_role_v2",
            role: val.ckname,
            type: uptype,
            authkey: cfg.user.authkey,
          },
        });
        //val.ckname[uptype]
      },
    });

    onMounted(async () => {
      await getrole(true, false);
    });

    return {
      comp,
      val,
      ct,
      cfg,
    };
  },
  async mounted() {},
});
</script>

<style>
.hero_wp {
  width: 64px;
  height: 64px;
  border: solid 2px #7d7d7d;
  background-image: linear-gradient(to bottom, #333e61, #168950);
  border-radius: 3px;
  position: relative;
}

.hero_wp::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 7px;
  border-radius: 0px 0px 3px 3px;
  background-color: #5eec00;
}

.hero_main_div {
  margin-left: 8px;
  margin-right: 8px;
  margin-top: 10px;
  font-size: 15px;
  background-color: rgb(99 129 161 / 40%);
  padding: 8px;
}
.hero_eq_box {
  border: solid 5px rgb(163 170 200 / 40%);
  border-radius: 5px;
  text-align: center;
  background-color: rgb(208 221 242 / 90%);
  box-shadow: 0 0 3px #8883a5;
  width: 60px;
  height: 60px;
  line-height: 60px;
  font-size: 22px;
  text-shadow: 0 0 5px #a7a7a7;
  color: #fff;
}

.hero_list_div {
  display: flex;
  justify-content: space-between;
}
.hero_eqst {
  position: absolute;
  bottom: 0px;
  width: 90%;
  margin-left: 5%;
  z-index: 33;
  filter: drop-shadow(0px 0px 2px #000000a9);
}
</style>
